<template>
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="ModelDetailWinDialogVisible"
      title="查看检测模板信息"
      width="50%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="newModel" label-width="auto">

        <el-row>
          <el-col :span="12">
            <el-form-item label="模板编号">
              <el-input @click="" v-model="newModel.modelEncode"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模板名称">
              <el-input v-model="newModel.modelName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测种类">
              <el-checkbox-group v-model="editModelArr">
                <el-checkbox label="[来料检验]" value="[来料检验]"/>
                <el-checkbox label="[过程检验]" value="[过程检验]"/>
                <el-checkbox label="[首检]" value="[首检]"/>
                <el-checkbox label="[末检]" value="[末检]"/>
                <el-checkbox label="[巡检]" value="[巡检]"/>
                <el-checkbox label="[自检]" value="[自检]"/>
                <el-checkbox label="[成品检验]" value="[成品检验]"/>
                <el-checkbox label="[发货检验]" value="[发货检验]"/>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用">
              <el-radio-group v-model="newModel.modelEnable">
                <el-radio :value="0">否</el-radio>
                <el-radio :value="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div>
        <el-button @click="cancelnewModel">取消</el-button>
        <el-button @click="cancelnewModel" type="primary">返回</el-button>
      </div>
<ModelDetectionItemsAndItemProducts/>
    </template>
  </el-dialog>

<!--  <ModelDetectionItemsAndItemProducts :is-show="DetectionWinIsShow"/>-->
</template>

<script setup>
import {onBeforeUnmount, onMounted, ref, shallowRef, watch} from 'vue'

import qualityRequest from "@/api/quality.js";
import ModelDetectionItemsAndItemProducts from "@/views/quality control/common defects/detect_model/model-detectionItemsAndItemProducts.vue";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['addComplete', 'cancelEdit'])
// 弹窗标记
let ModelDetailWinDialogVisible = ref(false);
let props = defineProps(["isShow", "modelId"]);
// 编辑的项目对象
let newModel = ref({})
//用来接受后端返回的modelType并回显出来
let editModelArr = ref([])
let DetectionWinIsShow = ref(false);
// 富文本编辑器相关的属性
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})


/**
 * 取消编辑按钮事件
 */
function cancelnewModel() {
  newModel = ref({});
  ModelDetailWinDialogVisible.value = false;
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose() {
  emits("cancelEdit")
}


/**
 * 通过modelId加载任务信息
 * @param modelId
 */
function loadModelById(modelId) {
  qualityRequest.getModelById(modelId, res => {
    if (res.data) {
      // editTask.value = res.data;
      newModel.value = res.data;
      editModelArr.value = newModel.value.modelType.split(',')
      console.log("editModelArr的值为" + editModelArr.value)
      console.log("newModel.value.modelType的值为" + newModel.value.modelType)
      // 弹窗
      ModelDetailWinDialogVisible.value = true;
    }
  });
}

/**
 * 侦听器 侦听 props.isShow
 */
watch(() => props.isShow, () => {
  loadModelById(props.modelId)
  ModelDetailWinDialogVisible.value = props.isShow
  // DetectionWinIsShow.value=props.isShow
});

</script>
<style scoped>

</style>